<template>
  <div class="wrapper">
    <div class="info-wrapper">
      <user-info-card
        class="user-info-card"
        v-if="userStore.isLogin"
      ></user-info-card>
      <button class="login-button" @click="logreg()" v-else>登录/注册</button>
    </div>

    <ul class="items" v-if="userStore.isLogin">
      <li
        class="iconfont icon-History history-icon"
        @click.stop.self="showHistory = !showHistory"
        :class="{ bgLight: showHistory }"
        title="历史记录"
      >
        H
        <history-card
          class="history-card"
          :class="historyCardStyle"
        ></history-card>
      </li>
    </ul>

    <!-- <user-log -->
    <!--   class="user-log" -->
    <!--   :class="{ fadeOut: !showLog }" -->
    <!--   @exit="showLog = false" -->
    <!-- ></user-log> -->
  </div>
</template>

<script lang="ts" setup>
import HistoryCard from './HistoryCard.vue'
import UserInfoCard from './UserInfoCard.vue'
import UserLog from '../BaseCom/UserLog.vue'
import { ref, computed } from 'vue'
import { useUserStore } from '@/store/user'
import { useEventListener } from '@vueuse/core'

let showHistory = ref(false)
let showInfo = ref(false)
let showLog = ref(false)

let historyCardStyle = computed(() => {
  return {
    fadeIn: showHistory.value,
    fadeOut: !showHistory.value,
  }
})

function clear() {
  showHistory.value = showInfo.value = false
}

function logreg() {
  showLog.value = true
}

const userStore = useUserStore()

function logout() {
  userStore.logout()
}

function historyCardListener() {
  showHistory.value = false
}

useEventListener(document, 'click', historyCardListener)
</script>

<style scoped lang="scss">
@import 'style/config';
@import 'style/shortcut';

$ucw: 200px;
$uch: $th;
$ucih: $th * 7 / 12;

.wrapper {
  width: $ucw;
  height: $uch;
  @include flex();

  .items {
    @include flex();
    width: 40%;
    line-height: $uch;
    text-align: center;
    color: $dark;
    transition: 0.2s;

    > li:hover {
      background-color: $light;
      cursor: pointer;
      color: black;
    }

    > li {
      width: $ucih;
      height: $ucih;
      text-align: center;
      line-height: $ucih;
      font-size: 22px;
      transition: 0.3s;
      border-radius: 5px;
    }

    .history-icon {
      position: relative;

      .history-card {
        position: absolute;
        z-index: 9999;
        right: 0;
        transform: translateY(($uch - $ucih) / 2);
        transition: 0.3s;
      }
    }
  }

  .info-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    @include flex();

    .login-button {
      width: 80px;
      height: $ucih;
      text-align: center;
      line-height: $ucih * 0.4;
      font-size: $ucih * 0.4;
      border-radius: 5px;
      border: $gray solid 1px;

      transition: 0.2s;

      &:hover {
        border: $lightBlue solid 1px;
        color: blue;
      }
    }
  }

  .user-log {
    transition: 0.3s;
  }
}
</style>
